<!-- 个人中心登录版 -->
<template >
	<view class="title">
		<view style="background-color:#FFFFEE;" class="ddd" >
			<!-- 顶部导航栏 -->
			<view>
				<u-navbar title="个人中心" @rightClick="rightClick"  rightIcon="setting" bgColor="#FFFFFF" height="40" >
					<u-icon name="photo" color="#2979ff" size="60"></u-icon>
					
				</u-navbar>
				<u-gap height="40" bgColor="#909399" ></u-gap>
			</view>
			
			
			
			<view class="aaa" >
				<u-avatar :src="filePath" size="100px" mode="scaleToFill"></u-avatar>
				<view class="ccc">
					
				<view class="bbd">
				<view class="bbq">
				<view class="b1" >
					<view>
				<!-- 用户名 -->
				<u--text :text="userName" size="14" bold ></u--text>
				</view>
				<!-- 性别 -->
				<view>
				<!-- 女 -->
				<u-icon name="man" color="#2979ff" size="22" v-if="userSex==0"></u-icon>
				<!-- 男 -->
				<u-icon name="woman" color="#2979ff" size="23" v-if="userSex==1"></u-icon>
				</view>
				
				</view>
				<!-- 地址 -->
				<view class="b2">
				<u--text :text="userAddress" size="14"  class="b2"></u--text>
				</view>
				<!-- 签名 -->
				<u--text :text="userAutograph" size="14" color="#c4c6c9" wordWrap="200px"></u--text>
				</view>
				<!-- 个人主页跳转标签 -->
				<view class="bbp">
					<u--text align="center" :text="Text1" size="20" color="#F5F5F5" ></u--text>
				</view>
				</view>	
				<!-- 社交数据 -->
				<view class="bbb">
				<!-- 粉丝数 -->
				<u-link href="https://www.sogou.com/" :text="fensi" @click="click" fontSize="10"></u-link>
				<!-- 关注数 -->
				<u-link href="https://www.qidian.com/" :text="guanzhu" @click="click" fontSize="10"></u-link>
				<!-- 获赞与收藏数 -->
				<u-link url="../../components/gtc-pickerAddress/pickerAddress" :text="shoucang" @click="click" fontSize="10"></u-link>
				</view>
				</view>
			</view >
				
		</view>
	</view>	
</template>

<script>
	export default {
		created() {
		    /*用户详情*/
		    this.UserAll();
		  },
		data() {
			return {
				filePath: 'http://c.svner.cn/7e5c246afa5149729bcc46d845382c69.png',//默认头像图片路径
				userName: '',//用户名
				userSex: '0',//性别
				userAddress: '',//地址
				userAutograph: '',//签名
				text: '无头像',//无图片替换文字
				Text1:'个人主页',//个人主页跳转标签描述文字
				fensi: '',//粉丝数文本
				guanzhu: '',//关注数文本
				shoucang: '',//获赞与收藏数文本
			}
		},
		onLoad() {
	
		},
		methods: {
			/* 顶部导航栏右侧按钮点击事件 */
			rightClick() {
				//跳转至系统设置页面
	            uni.redirectTo({
	            	url: '../me/setUp0'
	            })
	        },
			/* 顶部导航栏左侧按钮点击事件(未使用) */
	        leftClick() {
				
	        },
			/*用户详情*/
			UserAll() {
				//根据token获取当前登录用户信息
				uni.$u.http.post('http://localhost:8090/login/User/selectById',sessionStorage.getItem("token")).then(res => {
						//粉丝数赋值
						this.fensi="粉丝"+9999;
						//关注数赋值
						this.guanzhu="关注"+9999;
						//获赞与收藏数赋值
						this.shoucang="获赞与收藏"+9999
						//用户名赋值
						this.userName=res.data.object.userName;
						//性别赋值
						this.userSex=res.data.object.userSex;
						//地址赋值
						this.userAddress=res.data.object.userAddress;
						//签名赋值
						this.userAutograph=res.data.object.userAutograph;
						//根据图片id获取图片路径
						uni.$u.http.get('http://localhost:8090/login/User/pictureById/'+res.data.object.userFileId).then(res => {	
							//图片路径赋值
							this.filePath=res.data.object
							})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
	  height:100%;
	  width: 100%;
	}
	.title {
		position: relative;
		  background-color: #F5F5F5;
		  height: 100%;
		  flex-flow: row;
		  justify-content: flex-start;
		  display: flex;
		  width: 100%;
	}
	.aaa {
		position: relative;
		background-color: #FFFFFF;
		// border-radius: 10%;
		
		flex-flow: row;
		justify-content: flex-start;
		display: flex;
	}
	.bbq {
		position: relative;
		// border-radius: 10%;
		width:200px;
		flex-flow: row;
		justify-content: flex-start;
		
	}
	.bbp {
		position: relative;
		background-color: black;
		border-radius: 40px 0px 0px 40px;
		width: 100px;
		margin-left: auto;
		height: 30px;
		
	}
	.bbd {
		position: relative;
		// border-radius: 10%;
		width: 100%;
		display: flex;
	}
	.bbb {
		position: relative;
		flex-flow: row;
		justify-content: flex-start;
		display: flex;
		height: 20px;
	}
	.b1 {
		
		position: relative;
		flex-flow: row;
		justify-content: start;
		display: flex;
		height: 20px;
		width: 200px;
	}
	.b3 {
		position: relative;
		flex-flow: row;
		justify-content: center;
		display: flex;
		height: 20px;
		background-color:black;
		width: 200px;
	}
	.b2 {
		position: relative;
		flex-flow: row;
		justify-content: flex-start;
		display: flex;
		height: 20px;
		width: 200px;
		border-radius: 50px 50px 50px 50px;
	}
	.ccc {
		position: relative;
		flex-flow: row;
		width: 100%;
		height: 40px;
	}
	.ddd {
		position: relative;
		flex-flow: row;
		width: 100%;
		height: 40px;
	}
</style>